<template>
  <div class="home">
    <van-sticky>
      <van-search
        @search="searchByKeyword"
        class="search-bar"
        :keyword="keyword"
        shape="round"
        background="rgb(132, 93, 50)"
        placeholder="搜一搜"
      >
        <template #left-icon>
          <img
            style="width:22px;align-self:center;margin-right:8px;"
            src="https://img.youpin.mi-img.com/static/weex_images/v1/m/navi_search_v5.png"
            alt
          />
        </template>
        <template #left>
          <img
            class="logo-icon"
            src="https://img.youpin.mi-img.com/static/weex_images/v1/m/navi_title_v6.png"
            alt
          />
        </template>
      </van-search>
    </van-sticky>
    <banner :images="bannerData"></banner>
    <kingkong :kingkong="kingkongData"></kingkong>
    <div>
      <img src="" v-for="item in plazaData" :key="" alt>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Banners from "@/components/Banners";
import Kingkong from "@/components/Kingkong";

export default {
  data() {
    return {
      homeData: {},
      keyword: "",
    };
  },
  computed: {
    bannerData() {
      const BANNER_KEY = "declare_banner_new";
      return this.getSomeData(BANNER_KEY);
    },
    kingkongData() {
      const KINGKONG_KEY = "kingkong_new";
      return this.getSomeData(KINGKONG_KEY);
    },
    plazaData() {
      const PLAZA_KEY = "plaza_new";
      return this.getSomeData(PLAZA_KEY, 'rows');
    }
  },
  components: {
    banner: Banners,
    kingkong: Kingkong,
  },
  created() {
    this.$ajax.getHomeData().then((res) => {
      this.homeData = res.data.data;
    });
  },
  methods: {
    getSomeData(key, subKey) {
      let R = this.R;
      let floors = R.pathOr([], ["homepage", "floors"], this.homeData);
      let someData = R.pathOr(
        [],
        ["data", subKey || "items"],
        R.find(R.propEq("module_key", key), floors)
      );

      return someData;
    },
    searchByKeyword() {
      this.$ajax
        .post(
          "https://www.fastmock.site/mock/608aaa07a7e98094a793e1821bb69935/myData/test/stuff",
          this.keyword
        )
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.search-bar {
  height: 62px;
  justify-content: space-between;
  /deep/ .van-search__content.van-search__content--round {
    height: 35.33px;
  }

  .logo-icon {
    width: 10%;
    margin-right: 3%;
  }

  /deep/ .van-search__content.van-search__content--round {
    flex: 1 1 80%;
  }
}
</style>   